<template>
    <div class="bind-info-msg" v-loading="loading">
        <div class="table-box">
            <el-table :data="tableData" ref="table" border style="width: 100%">
              <el-table-column width="120" label="类型">
                    <template slot-scope="scope">
                        <p> {{ scope.row.type }}</p>
                    </template>
                </el-table-column>
                <el-table-column width="260">
                    <template slot="header" slot-scope="scope">
                        <span style="margin-left: 10px">号码</span>
                    </template>
                    <template slot-scope="scope">
                        <div class="divWrap" v-for="(item, index) in scope.row.userBindInfoVersionEntryOneList" :key="index">
                            <div class="pWrap" :style="{ 'height': 43 * 2 * item.userBindInfoVersionEntryTwoList.length + 'px'}">
                                <p v-if="item.name">{{ item.name }}</p>
                                <p v-if="!item.jumpType"> {{ item.number }} <span v-if="item.blackDesc" style="color:red;">({{ item.blackDesc }})</span></p>
                                <p v-else class="table-btn" @click.stop="goQQDetails(item)"> 
                                    <span>{{ item.number }}</span> 
                                    <span v-if="item.blackDesc" style="color:red;">({{ item.blackDesc }})</span>
                                    <span style="margin-left: 5px;" v-if="/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(item.number)" @click.stop="copyPhone(item.number)">复制</span>
                                </p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="150">
                    <template slot="header" slot-scope="scope">
                        <span style="margin-left: 10px">来源</span>
                    </template>
                    <template slot-scope="scope">
                        <div class="divWrap" v-for="(item, index) in scope.row.userBindInfoVersionEntryOneList" :key="index">
                            <div class="pWrap" :style="{ 'height': 43 * 2 + 'px'}" v-for="(it, idx) in item.userBindInfoVersionEntryTwoList" :key="idx">
                                <p> {{ it.source }} <span v-if="it.isBind" style="color: #00ba45">(当前绑定)</span></p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="150">
                    <template slot="header" slot-scope="scope">
                        <span style="margin-left: 10px">时间</span>
                    </template>
                    <template slot-scope="scope">
                        <div class="divWrap" v-for="(item, index) in scope.row.userBindInfoVersionEntryOneList" :key="index">
                            <div class="pWrap" :style="{ 'height': 43 * 2 + 'px'}" v-for="(it, idx) in item.userBindInfoVersionEntryTwoList" :key="idx">
                                <p> {{ it.date }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!-- <el-table-column min-width="80" prop="skinCount" label="皮肤数"></el-table-column> -->
                <el-table-column min-width="120">
                    <template slot="header" slot-scope="scope">
                        <span style="margin-left: 10px">关联</span>
                    </template>
                    <template slot-scope="scope">
                        <div class="divWrap" v-for="(item, index) in scope.row.userBindInfoVersionEntryOneList" :key="index">
                            <div class="gl-wrap" v-for="(it, idx) in item.userBindInfoVersionEntryTwoList" :key="idx">
                                <template v-if="it.userBindInfoVersionEntryThreeList.length">
                                    <div 
                                        class="sWrap" 
                                        :style="{ 
                                            'height': i.jumpInfo.includes('https') ? 86 : 43 + 'px', 
                                            'border': (it.isPic || (item.userBindInfoVersionEntryTwoList.length === 2 && (idx === (item.userBindInfoVersionEntryTwoList.length - 1)) && (id === (it.userBindInfoVersionEntryThreeList.length - 1)))) && 'none'
                                        }" 
                                        v-for="(i, id) in it.userBindInfoVersionEntryThreeList" :key="id">
                                        <span v-if="i.joinInfo">{{ i.joinInfo}}：</span>
                                        <!-- <img style="width: 100px; height: 66px" v-if="i.jumpInfo && i.jumpInfo.includes('https')" :src="i.jumpInfo" alt=""> -->
                                        <template v-if="i.jumpInfo && i.jumpInfo.includes('https')">
                                            <el-image
                                                style="width: 100px; height: 59px"
                                                @click="showImgList(i.jumpInfo)"
                                                :src="i.jumpInfo"
                                                :preview-src-list="srcList">
                                            </el-image>
                                        </template>
                                        
                                        <span class="table-btn" @click="goQQDetails(i)" v-if="i.jumpType && !i.jumpInfo.includes('https')">{{ i.jumpInfo }}</span>
                                        <span v-if="!i.jumpType && !i.jumpInfo.includes('https')">{{ i.jumpInfo || '-'}}</span>
                                    </div>
                                </template>
                                
                                <template v-if="it.userBindInfoVersionEntryThreeList.length === 0">
                                    <div class="sWrap" :style="{ 'height': 43 + 'px'}">
                                        <span>&nbsp;</span>
                                    </div>
                                    <div class="sWrap" :style="{ 'height': 43 + 'px', 'border': (idx === (item.userBindInfoVersionEntryTwoList.length - 1)) && 'none'}">
                                        <span>&nbsp;</span>
                                    </div>
                                </template>
                                <template v-if="it.userBindInfoVersionEntryThreeList.length === 1 && !it.isPic">
                                    <div class="sWrap" :style="{ 'height': 43 + 'px', 'border': 'none'}">
                                        <span>&nbsp;</span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            tableData: [],
            srcList: [],
            pageNum: 1,
            pageSize: this._pageSizes,
            total: 0,
            loading: false
        }
    },
    props: ['detail'],
    created () {
        this.getList(this.pageNum)
    },
    mounted () {
        
    },
    methods: {
        // 复制手机号
        copyPhone(item) {
          const aux = document.createElement('textarea')
          aux.innerHTML = item
          document.body.appendChild(aux)
          aux.select()
          document.execCommand('copy')
          document.body.removeChild(aux)
          this.$message.success('复制成功')
        },
        showImgList (img) {
            let imgArr = []
            imgArr.push(img)
            this.srcList = imgArr
        },
        // 点击QQ账号 跳转到相应的 租号账号详情
        goQQDetails (item) {
            let path = ''
            let query = {}
            if (/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(item.number)) {
                return
            }
            if (item.jumpType === 1) {
                console.log('查询用户')
                path = `/dataReport/userDataDetail`
                query = {
                    keyword: item.number || item.jumpInfo
                }
            }
            if (item.jumpType === 2) {
                console.log('卖号账号详情')
                path = '/seller/accTradingDetail'
                query = {
                    dataId: item.param,
                    status: 0,
                    type: 0
                }
            }
            if (item.jumpType === 3) {
                console.log('卖号订单详情')
                path = '/seller/tradOrderDetail'
                query = {
                    orderId: item.param
                }
            }
            if (item.jumpType === 4) {
                console.log('王者出租托管详情')
                path = '/wzry/accDetail'
                query = {
                    accountId: item.number || item.jumpInfo,
                    dataId: item.param,
                    userId: this.$route.query.id || this.detail && this.detail.userId, 
                }
            }
            if (item.jumpType === 5) {
                console.log('吃鸡出租托管详情')
                path = '/hpjy/accManageDetail'
                query = {
                    accountId: item.number || item.jumpInfo,
                    userId: this.$route.query.id || this.detail && this.detail.userId,
                    dataId: item.param
                }
            }
            const { href } = this.$router.resolve({
                path,
                query
            })
            window.open(href, '_blank')
        },
        // 获取列表
        async getList (pageNum) {
            if (this.loading) return
            this.pageNum = pageNum
            this.loading = true
            let params = {
                // pageNum: pageNum,
                // pageSize: this.pageSize,
                userId: this.$route.query.id || this.detail.userId
                // userId: 100130
            }
            let res = await this.$http.get('/user/getUserBindInfoVersion2', {
                params
            })
            if (res.code === '0') {
                this.tableData = res.data.userBindInfoVersionEntryList
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        _formatDate (timestamp) {
            return formatDate(timestamp, 'YYYY-MM-DD HH:MM')
        },
        // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },
        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        }
    }
}
</script>

<style lang="scss" scoped>
    .bind-info-msg {
        .select-type {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .select-item {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span {
                    display: inline-block;
                    margin-right: 10px;
                }
            }
        }
        .template-option-box {
            max-width: 800px;
        }

        .table-box {
            margin: 20px 0;
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
        .table-btn{
            cursor: pointer;
            color: #409eff;
            font-size: 13px;
            font-weight: 500;
            &:hover{
                text-decoration: underline;
            }
        }
    }
    /deep/ .el-table {
        .cell {
            padding: 0px;
        }
    }
    .pWrap, .eWrap, .sWrap {
        padding: 10px;
        border-bottom: 1px solid #EBEEF5;
    }
    .divWrap {
        border-bottom: 1px solid #EBEEF5;
    }
    .pWrap:last-child {
        border: none;
    }
    .divWrap:last-child {
        border: none;
    }

    .gl-wrap {
        >.sWrap:last-child {
            // border: none !important;
        }
    }
</style>
